<template>
  <div>
    <el-table
      :data="dataSorce?.list || []"
      ref="dataTable"
      :height="tableHeight"
      :stripe="options.stripe"
      :border="options.border"
      highlight-current-row
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
    >
      <!-- selection选择框 -->
      <el-table-column
        v-if="options.selectType && options.selectType == 'checkbox'"
        type="selection"
        align="center"
        width="50"
      />
      <!-- 序号 -->
      <el-table-column
        v-if="options.showIndex"
        label="序号"
        width="60"
        align="center"
        type="index"
      />
      <!-- 列表信息 -->
      <template
        v-for="(column, index) in columns"
        :key="index"
      >
        <template v-if="column.slotName">
          <el-table-column
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
            :align="column.align || 'left'"
            :key="index"
          >
            <template #default="scope">
              <slot
                :name="column.slotName"
                :index="scope.$index"
                :row="scope.row"
              >
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
            :align="column.align || 'left'"
            :key="index"
            :fixed="column.fixed"
          ></el-table-column>
        </template>
      </template>
    </el-table>
    <div
      class="pagination"
      v-if="showPagination"
    >
      <el-pagination
        v-if="dataSorce?.totalCount"
        background
        @size-change="handlePageSizeChange"
        @current-change="handlePageNoChange"
        v-model:currentPage="dataSorce.pageNo"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="dataSorce.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataSorce.totalCount"
        style="text-align: right"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const props = defineProps({
  dataSorce: Object,
  // 是否展示分页
  showPagination: {
    type: Boolean,
    default: true
  },

  // 表格属性
  options: {
    type: Object,
    default: {
      tableHeight: null,
      stripe: true,
      border: false,
      extHeight: 0,
      showIndex: false
    }
  },

  // 数据列
  columns: Array,
  fetch: Function, //获取数据的函数
  initFetch: {
    type: Boolean,
    default: true
  }
})

// 顶部高度
const topHeight = 60 + 20 + 30 + 46
const tableHeight = ref(props.options.tableHeight ? props.options.tableHeight : window.innerHeight - topHeight - (props.options.extHeight || 0)
);

// 初始化
const init = () => {
  if (props.initFetch && props.fetch) {
    props.fetch()
  }
}
init();

// 清除选中
const dataTable = ref();
const clearSelection = () => {
  dataTable.value.clearSelection();
}

// 设置行选中
const setCurrentRow = (rowKey, rowValue) => {
  let row = props.dataSorce.list.find((item) => {
    return item[rowKey] === rowValue;
  })
  dataTable.value.setCurrentRow(row)
}

// 将子组件暴露出去， 否则父组件无法调用
defineExpose({ setCurrentRow, clearSelection });

const emit = defineEmits(['rowSelected', 'rowClick']);
// 行点击
const handleRowClick = (row) => {
  emit('rowClick', row)
}

// 多选
const handleSelectionChange = (row) => {
  emit('rowSelected', row)
}

// 切换每页大小
const handlePageSizeChange = (size) => {
  props.dataSorce.pageSize = size;
  props.dataSorce.pageNo = 1;
  props.fetch();
}

// 切换页码
const handlePageNoChange = (pageNo) => {
  props.dataSorce.pageNo = pageNo;
  props.fetch();
}


</script>

<style lang="scss">
.pagination {
  padding-top: 10px;
}

.el-pagination {
  justify-content: right;
}

.el-table .el-table__cell * {
  margin: 0 !important;
  padding: 0 !important;
}
</style>
